<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul,li {
            margin: 0;
            padding: 0;
        }
        .list>li{
            float: left;
            list-style: none;
            margin-right: 30px;
            padding-bottom: 5px;
            font-weight: bolder;
        }
        .list>li:first-child{
            color: orange;
            border-bottom: 3px solid orange;
        }
        .list>li:hover{
            color: orange;
            border-bottom: 3px solid orange;
            cursor: pointer;
        }
        /*
         当滑动的时候突然间多出来的5px的边框会影响到下面的盒子模型
         ie6的盒子模型：width+margin
        */
        .list{
            /*
              修改盒子的属性
            */
            box-sizing: border-box;
            overflow: hidden;
            height: 30px;
            width: 80%;
            margin: 10px auto;
        }
        .box{
            margin-top: 10px;
            clear: left;
            overflow: hidden;
            width: 80%;
            margin: 0 auto;
        }
        .box>li{
            list-style: none;
            float: left;
            width: 18%;
            margin-right: 5px;
            height: 300px;
        }
        .box>li>img{
            width: 100%;
            height: 70%;
        }
        a{
            display: block;
            font-size: 12px;
            margin-left: 5px;
        }
        /**
          nth-of-type:选中哪种元素类型的第几个
         */
        p{
            color: red;
            font-size: 18px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<ul class="list">
    <li class="box1">男装</li>
    <li class="box2">女装</li>
    <li class="box3">箱包</li>
    <li class="box4">食品</li>
    <li class="box5">电器城</li>
    <li class="box6">美妆</li>
    <li class="box7">鞋品</li>
    <li class="box8">户外运动</li>
</ul>
<ul class="box">

</ul>
<script type="text/javascript">
    ajaxFn("img/pic1.png");
    //把网络请求的过程封装到一个函数里面，避免代码的重复
     function ajaxFn(imageUrl) {
         //1、发送网络请求，借助网络请求对象
         var xr=new XMLHttpRequest();
         //2、设置发送的地址，请求方式，是否异步
         xr.open("POST","data/json1",true);
         //3、发送
         xr.send();
         //4、检测发送请求的状态
         xr.onreadystatechange=function () {
             //如果请求状态已经完成并且服务器答应给你响应，那么你就可以接收到数据了
             if(xr.readyState===4 && xr.status===200){
                 //5、接收数据，处理数据
                 //5.1 动态的创建dom元素，填充数据
                  createEle(xr.responseText,imageUrl);
             }
         }
     }
     //把动态的创建dom元素的过程也封装到函数里面
    function createEle(responseText,imageUrl) {
         if(document.getElementsByTagName("li").length>8){
             document.getElementsByClassName("box")[0].innerHTML="";
         }
        var datas=JSON.parse(responseText);//把接收的字符串转成对象
        for(var x in datas){
            var liele=document.createElement("li");
            var imgele=document.createElement("img");
            imgele.src=imageUrl;
            console.log(imgele.src);
            var aele=document.createElement("a");
            aele.innerHTML=datas[x].pro;
            var pele=document.createElement("p");
            pele.innerHTML=datas[x].price;
            //5.2 把动态创建的元素填充到页面上
            liele.appendChild(imgele);
            liele.appendChild(aele);
            liele.appendChild(pele);
            document.getElementsByClassName("box")[0].appendChild(liele);
        }

    }
///////////////////////////////////////////////////////
    //因为要给每一个li添加点击事件，所以可以借助事件委托来处理
    //把li的事件委托给父元素ul
   document.getElementsByClassName("list")[0].onclick=function (evevt) {
       //通过事件对象确定当前的目标元素
       var event=event||window.event;
       console.log(event.target);
       if(event.target.nodeName.toLowerCase()=="li"){
          switch (event.target.className){
              //TODO 改变元素的样式，进行函数的抽离
              case "box1":
                    console.log("box1点击事件被触发了");
                    ajaxFn("img/pic1.png");
                  break;
              case "box2":
                  console.log("box2点击事件被触发了");
                  ajaxFn("img/pic2.jpg");
                  break;
              case "box3":
                  console.log("box3点击事件被触发了");
                  ajaxFn("img/pic3.jpg");
                  break;
          }
       }



   }



</script>
</body>
</html>